import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';
import './login.css'

import { Input,Button,message } from 'antd';
import { CrownFilled,SmileFilled} from '@ant-design/icons';

function Login(){
    const [userName,setName] = useState('');
    const [passWord,setPsd] = useState('');
    let history = useHistory();
    const checkInfo=()=>{
        console.log('userName',userName);
        console.log('passWord',passWord);
        if(userName.trim()===''){
            message.error('请输入用户名');
        }else{
            if(passWord===''){
                message.error('请输入通行证');
            }else{
                if(passWord==='kolento'){
                    message.success('登录成功');
                    history.push('/');
                }else{
                    message.error('通行证错误');
                }

            }
        }
        
    }

    return (
        <div className="login-box">
            <div className="login-con">
                <div className="login">
                    <h2 className="title">2次元裂缝</h2>
                    <div className="input-box">
                        <Input className="input-list"  onChange={(e)=>{
                            setName(e.target.value)
                        }} size="large" placeholder="请输入用户名" prefix={<CrownFilled />} />
                        <Input className="input-list"  onChange={(e)=>{
                            setPsd(e.target.value);
                        }} size="large" placeholder="请输入通行证" type="password" prefix={<SmileFilled />} />

                        <Button className="login-btn" onClick={checkInfo} size="large" type="primary" block>登 录</Button>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Login;